<template>
  <div class="login-by-phone">
    <el-form
      :model="form"
      :rules="rules"
      ref="loginRef"
      label-position="button"
      hide-required-asterisk
    >
      <el-form-item label="账号" prop="account">
        <el-input
          v-model="form.account"
          placeholder="请输入蓝桥云听账号"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
          prefix-icon="el-icon-key"
        ></el-input>
      </el-form-item>
      <el-button type="text" @click="handleToRegister"
        >没有账号？立即注册</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { getLogin } from "@/api/api_user";
import md5 from "js-md5";//md5加密技术
export default {
  data() {
    const checkAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
      setTimeout(() => {
        let reg = /^\w{6,15}$/;
        if (!reg.test(value)) {
          callback(
            new Error("账号可包含字母、数字、下划线，长度在 6-15 位之间")
          );
        } else {
          callback();
        }
      }, 500);
    };
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入密码"));
      }
      setTimeout(() => {
        let reg =
          /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]{8,}.*$/;
        if (!reg.test(value)) {
          callback(
            new Error("必须由大小写字母、数字和特殊字符组成，长度至少 8 位")
          );
        } else {
          callback();
        }
      }, 500);
    };
    /* 原来还能这样写！！！上面声明，下面return */
    return {
      form: { account: "xiaoyu", password: "luoyu2003@LY", md5_password: "" },
      rules: {
        account: [{ validator: checkAccount, trigger: "blur" }],
        password: [
          { validator: checkPassword, required: true, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    doLogin() {
      /* 这个loginRef是本组件上的！ */
      console.log(md5("luoyu2003@LY"));
      this.$refs.loginRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请输入正确的信息");
        const params = {
          account: this.form.account,
          password: md5(this.form.password),//md5加密
        };
        const res = await getLogin(params);
        if (res.code !== 200) {
          //这里第一次接触存session的前端
          localStorage.setItem("isLogin", "false");
          this.$store.commit("setIsLogin", false);
          //登录失败，将消息发送到父组件，取消isloading。
          this.$emit("cancelLoading",false);
          return this.$message.error(res.msg);
        }
        this.$store.commit("setIsLogin", true);
        this.$store.commit("setAccount", res);

        this.$message({
          type: "success",
          message: "登录成功",
          duration: 700,
        });
        this.$router.push("/personalrecom");
      });
    },
    handleToRegister() {
      this.$router.push("/register");
    },
  },
};
</script>
